<template>
	<cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
		<el-row type="flex" class="h-100">
			<cl-biz-toolbar v-model="currBiz.biz_id" @changeBiz="changeBiz" />
			<cl-flex1 class="h-100" style="overflow: hidden">
				<cl-pagefull @resize="onResize">
					<template #head>
						<el-row type="flex">
							<span class="title">{{ currBiz.biz_name }}</span>
							<cl-flex1 />
							<div>
								<cl-filter-group v-model="search">
									<cl-filter label="关键字">
										<el-input
											v-model="search.cname"
											placeholder="请输入渠道名称"
											clearable
											@change="refresh()"
										/>
									</cl-filter>
								</cl-filter-group>
								<el-button
									icon="el-icon-plus"
									type="primary"
									@click="add({}, 'add')"
									size="small"
								>
									添加推广渠道
								</el-button>
							</div>
						</el-row>
					</template>
					<cl-table
						v-bind="tableData"
						:props="{
							maxHeight: this.maxHeight
						}"
					>
						<cl-empty slot="empty" />
						<template #column-type="{ scope:{row} }">
							{{ row.type == 1 ? "推广使用" : "其他" }}
						</template>
						<template #column-status="{ scope:{row} }">
							<template v-if="row.type != 0">
								<el-tag v-if="row.status == 1" type="primary"> 正常 </el-tag>
								<el-tag v-if="row.status == 2" type="info"> 禁用 </el-tag>
							</template>
						</template>
						<template #column-opt="{ scope:{row} }">
							<el-button type="warning" @click="edit(row, 'edit')">编辑</el-button>
							<el-button type="success" @click="edit(row, 'copy')">复制</el-button>
							<el-button type="danger" @click="del(row)">删除</el-button>
						</template>
					</cl-table>
					<template #foot>
						<el-row type="flex">
							<cl-flex1 />
							<zm-pagination />
						</el-row>
					</template>
				</cl-pagefull>
			</cl-flex1>
		</el-row>

		<channel-form ref="form" @confirm="refresh" />
	</cl-crud>
</template>
<script>
import ChannelForm from "./components/channel-form";
export default {
	name: "SetPromotionChannel",
	components: {
		ChannelForm
	},
	data() {
		return {
			tableData: {
				"context-menu": ["refresh"],
				columns: [
					{ type: "index", label: "#", align: "center", width: 50, fixed: true },
					{
						label: "渠道名称",
						prop: "cname",
						minWidth: 120,
						align: "left",
						showOverflowTooltip: true
					},
					{ label: "媒体平台", prop: "media_platform", width: 120 },
					{ label: "渠道类型", prop: "type", width: 120 },
					{ label: "状态", prop: "status", width: 120 },
					{ label: "操作", prop: "opt", width: 240 }
				]
			},
			saving: false,
			maxHeight: 500,
			search: {
				cname: "",
				showpage: 1
			},
			currBiz: {
				biz_id: ""
			},
			load: false
		};
	},
	methods: {
		onLoad({ ctx, app }) {
			ctx.service(this.$service.source).done();
			if (!this.load) return;
			app.refresh(this.search);
		},
		async onRefresh(params, { next, done, render }) {
			const { biz_id } = this.currBiz;
			let { list } = await next({
				...params,
				biz_id
			});
			render(list);
		},
		// crud刷新
		refresh(biz_id, reset = true) {
			biz_id && (this.currBiz.biz_id = biz_id);
			let params = { ...this.search };
			if (reset) {
				params.page = 1;
			}
			this.$refs.crud.refresh(params);
			this.load = true;
		},
		onResize(h) {
			this.maxHeight = h;
		},
		changeBiz(v) {
			this.currBiz = v;
			this.refresh();
		},
		add(row, type) {
			this.openForm(row, type);
		},
		// 修改
		edit(row, type) {
			this.openForm(row, type);
		},
		openForm(data, type) {
			this.$refs.form.open(data, type);
		},
		//删除
		del({ id }) {
			this.confirm("此操作将删除该渠道, 是否继续?")
				.then(() => {
					this.$service.source.remove({ id }).then(res => {
						this.refresh();
						this.$message.success("删除成功!");
					});
				})
				.catch(() => {});
		},
		mediaAdd(){
			this.$refs.mediaForm.open();
		}
	}
};
</script>
<style lang="scss" scoped>
.title {
	font-size: 18px;
}
.biz-box {
	height: 100%;
	width: 230px;
	box-shadow: 1px 0 1px -1px #969797;
}
</style>
